<template>
  <div class="Vlist">
    <h2 class="enjoin">
      参加志愿项目
    </h2>
    <!-- 显示归属地区的项目 -->
    <div class="chose">
      <div class="choseItem">
        <span class="tit">项目区域</span>
        <ul>
          <li v-for="(item,index) in volunteerData.address" :key="index">{{item}}</li>
        </ul>
      </div>
    </div>

    <div class="projectBox">
      <ul class="projectUl">
        <li class="projectLi" v-for="item in volunteerData.data" :key="item._id" :id="item._id" @click="toDetail(item._id)">
          <div class="time">
            {{item.time}}
          </div>
          <div class="imgBox">
            <img :src="item.img" alt=""  :id="item._id">
          </div>
          <div class="txtBox">
            <p class="name">
              {{item.name}}
            </p>
            <ul>
              <li>
                需要人数
                <p>{{item.need}}</p>
              </li>
              <li>
                已招募
                <p>{{item.now}}</p>
              </li>
              <li>
                <span class="end">
                  距招募结束
                </span>
                <p>{{item.end}}天</p>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      volunteer:  ''
    }
  },
  props: ['volunteerData'],
  methods: {
    toDetail (id) {
      // let id = e.target.id
      this.$router.push(`/VolunteerDetail/id=${id}`)
    }
  },
  mounted () {
   
  }
}
</script>
<style lang="scss" scoped>
.Vlist {
  padding: 0 40px;
  .enjoin {
    margin-top: 30px;
  }
  .chose {
    padding-top: 20px;
    margin-top: 10px;
    .choseItem {
      display: flex;
      .tit {
        width: 100px;
      }
      ul {
        display: flex;
        margin-left: 20px;
        flex-wrap: wrap;
        li {
          padding: 1px 6px;
          border-radius: 5px;
          background: #fff;
          color: #1981d8;
          font-size: 14px;
          margin-bottom: 10px;
          cursor: pointer;
        }
        li:hover {
          color: red;
        }
        :nth-child(1) {
          background: #1981d8;
          color: #fff;
        }
        :nth-child(1):hover {
          background: #1981d8;
          color: #fff;
        }
        .activeLi {
          background: #1981d8;
          color: #fff;
        }
      }
    }
  }

  .projectBox {
    margin-top: 40px;
    .projectUl {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .projectLi {
        border: 1px solid #ccc;
        width: 24%;
        height: 440px;
        margin-bottom: 28px;
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.3s;
        .time {
          background: #bebebe;
          color: #fff;
          text-align: center;
          margin: auto;
        }
        .imgBox {
          height: 340px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          img {
            width: 100%;
            margin: auto;
          }
        }
        .txtBox {
          .name {
            text-align: center;
            padding: 5px 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          ul {
            display: flex;
            justify-content: space-between;
            li {
              width: 33%;
              text-align: center;
              background: #f7f7f7;
              color: #888;
              font-size: 13px;
              padding: 5px 0;
              .end {
                color: rgb(204, 51, 0);
              }
            }
          }
        }
      }
      .projectLi:hover {
        box-shadow: #333 0px 0px 6px;
      }
    }
  }
}
</style>